<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>StaticState Test</title>

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
    ></script>

    <script type="text/javascript" src="redist/jquery.3.7.1.min.js"></script>
    <script
      type="text/javascript"
      src="../dist/jquery.imagemapster.js"
    ></script>

    <!-- <script type="text/javascript" src="redist/zepto.1.2.0.min.js"></script>
    <script
      type="text/javascript"
      src="../dist/jquery.imagemapster.zepto.js"
    ></script> -->

    <link rel="stylesheet" href="stylesheets/base.css" />
    <style type="text/css">
      thead {
        color: green;
      }
      tbody {
        color: blue;
      }
      tfoot {
        color: red;
      }

      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 5px;
      }
    </style>

    <style type="text/css">
      p,
      div {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function () {
        'use strict';

        var $image = $('#veg_image'),
          imageOptions = {
            mapKey: 'name',
            fillOpacity: 0.4,
            fillColor: 'd42e16',
            strokeColor: '3320FF',
            strokeOpacity: 0.8,
            strokeWidth: 5,
            render_select: {
              strokeWidth: 10
            },
            render_highlight: {
              strokeWidth: 5
            },
            stroke: true,
            clickNavigate: false,
            onConfigured: function () {
              updateOptions();
              updateKeys();
            },
            onStateChange: function () {
              updateKeys();
            },
            onClick: function () {
              return true;
            },
            showToolTip: true,
            toolTip: function (data) {
              return $(data.target).data('tooltip');
            },
            areas: [
              {
                key: 'redpepper',
                staticState: true
              },
              {
                key: 'celery',
                staticState: false
              }
            ]
          };

        $('#resetMap').on('click', function () {
          $image.mapster('unbind').mapster(imageOptions);
        });

        $('.toggleSelected').on('click', function () {
          var key = $(this).data('name'),
            isSelected = $(this).data('selected'),
            options = $(this).data('options') ? { strokeWidth: 3 } : null;
          $image.mapster('set', isSelected, key, options);
        });

        function updateKeys() {
          var keys = $image.mapster('get');
          $('#selectedKeys').text(keys || 'No Keys Selected');
        }

        function updateOptions() {
          var options = $image.mapster('get_options');
          $('#clickNavigate').text(options.clickNavigate);
          $('#navigateMode').text(options.navigateMode);
        }

        $('#clickNavigate').on('click', function () {
          var options = $image.mapster('get_options');
          $image.mapster('set_options', {
            clickNavigate: options.clickNavigate === true ? false : true
          });
          updateOptions();
        });

        $('#navigateMode').on('click', function () {
          var options = $image.mapster('get_options');
          $image.mapster('set_options', {
            navigateMode: options.navigateMode === 'open' ? 'location' : 'open'
          });
          updateOptions();
        });

        $image.mapster(imageOptions);
      });
    </script>
  </head>

  <body>
    <div class="navmenu">
      Return to <a href="index.html">Main Menu</a>
      <hr />
    </div>
    <h2>StaticState Test</h2>
    <p>
      Test 'staticState' option using various combinations of values. This
      should be converted to a unit test once the testing framework is updated.
    </p>
    <p>The behavior of each area should be:</p>
    <table>
      <thead>
        <tr>
          <th>Vegetable</th>
          <th>staticState</th>
          <th>href</th>
          <th>highlight</th>
          <th>select via click</th>
          <th>select via api</th>
          <th>navigation</th>
          <th>tooltip</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Red Pepper</td>
          <td>true</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td>staticState true disables changing selected via click</td>
        </tr>
        <tr>
          <td>Celery</td>
          <td>false</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td>staticState false disables changing selected via click</td>
        </tr>
        <tr>
          <td>Carrots</td>
          <td>not specified</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td></td>
        </tr>
        <tr>
          <td>Asparagus</td>
          <td>not specified</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td></td>
        </tr>
        <tr>
          <td>Squash</td>
          <td>not specified</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td></td>
        </tr>
        <tr>
          <td>Yellow Pepper</td>
          <td>not specified</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td></td>
        </tr>
        <tr>
          <td>Broccoli</td>
          <td>not specified</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td></td>
        </tr>
        <tr>
          <td>Broccoli #2</td>
          <td>not specified</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td></td>
        </tr>
        <tr>
          <td>Dip</td>
          <td>not specified</td>
          <td>yes - #</td>
          <td>yes</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
          <td>yes</td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <p>
      You can toggle the values of navigateMode and clickNavigate. The behavior
      should be identical regardless of their values.
    </p>
    <div>
      NavigateMode: <a id="navigateMode" href="javascript:void(0);">TBD</a>
    </div>
    <div>
      ClickNavigate: <a id="clickNavigate" href="javascript:void(0);">TBD</a>
    </div>
    <br />
    <div>Selected Keys: <span id="selectedKeys"></span></div>
    <table>
      <thhead>
        <tr>
          <th>area</th>
          <th>Select No Options</th>
          <th>Select With Options</th>
          <th>Deselect</th>
        </tr>
      </thhead>
      <tbody>
        <tr>
          <td>Red Pepper</td>
          <td>
            <button
              class="toggleSelected"
              data-name="redpepper"
              data-selected="true"
              data-options="false"
            >
              Select
            </button>
          </td>
          <td>
            <button
              class="toggleSelected"
              data-name="redpepper"
              data-selected="true"
              data-options="true"
            >
              Select
            </button>
          </td>
          <td>
            <button
              class="toggleSelected"
              data-name="redpepper"
              data-selected="false"
              data-options="false"
            >
              Deselect
            </button>
          </td>
        </tr>
        <tr>
          <td>Celery</td>
          <td>
            <button
              class="toggleSelected"
              data-name="celery"
              data-selected="true"
              data-options="false"
            >
              Select
            </button>
          </td>
          <td>
            <button
              class="toggleSelected"
              data-name="celery"
              data-selected="true"
              data-options="true"
            >
              Select
            </button>
          </td>
          <td>
            <button
              class="toggleSelected"
              data-name="celery"
              data-selected="false"
              data-options="false"
            >
              Deselect
            </button>
          </td>
        </tr>
        <tr>
          <td>Carrots</td>
          <td>
            <button
              class="toggleSelected"
              data-name="carrots"
              data-selected="true"
              data-options="false"
            >
              Select
            </button>
          </td>
          <td>
            <button
              class="toggleSelected"
              data-name="carrots"
              data-selected="true"
              data-options="true"
            >
              Select
            </button>
          </td>
          <td>
            <button
              class="toggleSelected"
              data-name="carrots"
              data-selected="false"
              data-options="false"
            >
              Deselect
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <button id="resetMap">Reset Map</button>
    </div>

    <img id="veg_image" src="images/vegetables.jpg" usemap="#veg_map" />
    <map id="veg_map" name="veg_map">
      <area
        shape="poly"
        name="redpepper"
        data-tooltip="redpepper"
        coords="412,156, 427,161, 429,163, 444,153, 453,155, 457,159, 452,168, 459,174, 455,178, 460,179, 463,193, 460,203, 441,214, 436,217, 458,238, 469,257, 479,267, 478,269, 479,285, 458,309, 436,310, 414,305, 410,323, 397,334, 379,313, 389,316, 401,320, 399,305, 382,300, 371,290, 367,296, 366,298, 338,274, 332,272, 300,239, 316,238, 316,234, 313,230, 328,225, 333,213, 338,196, 333,181, 337,166, 345,145"
        href="#"
      />
      <area
        shape="poly"
        name="celery"
        data-tooltip="celery"
        coords="147,131, 156,143, 163,146, 177,129, 175,138, 177,138, 182,144, 180,164, 148,169, 139,171, 144,180, 141,198, 139,208, 140,222, 127,237, 148,216, 163,212, 166,216, 160,223, 163,233, 153,281, 135,318, 129,313, 122,322, 117,320, 99,301, 98,293, 85,300, 80,303, 74,300, 64,285, 76,272, 98,249, 94,246, 72,261, 57,258, 62,251, 60,248, 47,228, 51,207, 71,195, 72,192, 38,202, 33,195, 30,173, 147,127"
        href="#"
      />
      <area
        shape="poly"
        name="carrots"
        data-tooltip="carrots"
        coords="175,74, 170,80, 154,85, 189,103, 190,111, 182,111, 179,98, 157,95, 142,111, 140,128, 38,169, 39,163, 74,143, 74,141, 56,135, 52,115, 79,111, 78,106, 63,98, 71,91, 81,88, 82,83, 91,75, 136,74, 174,70"
        href="#"
      />
      <area
        shape="poly"
        name="asparagus"
        data-tooltip="asparagus"
        coords="224,25, 239,33, 244,36, 247,32, 327,23, 344,31, 343,36, 319,41, 315,42, 302,52, 272,61, 265,64, 270,73, 256,67, 248,60, 187,55, 192,58, 192,60, 184,64, 185,67, 176,67, 173,69, 142,67, 146,63, 135,59, 123,57, 142,44, 145,42, 143,39, 145,32, 207,38, 185,18, 212,19, 220,22"
        href="#"
      />
      <area
        shape="poly"
        name="squash"
        data-tooltip="squash"
        coords="388,26, 391,38, 394,43, 395,46, 425,58, 427,68, 428,92, 386,125, 371,132, 374,124, 377,118, 374,105, 371,105, 370,107, 364,102, 368,97, 356,87, 353,89, 348,86, 322,87, 314,100, 314,102, 282,85, 278,84, 273,74, 272,68, 319,46, 346,31"
        href="#"
      />
      <area
        shape="poly"
        name="yellowpepper"
        data-tooltip="yellowpepper"
        coords="237,222, 246,254, 255,291, 262,323, 271,322, 285,350, 306,352, 307,365, 298,374, 285,366, 270,375, 249,378, 244,384, 231,389, 215,373, 210,363, 203,357, 199,368, 184,361, 175,349, 162,356, 140,340, 143,305, 161,252, 168,224, 188,240, 194,223, 198,232, 213,226, 224,224, 229,218"
        href="#"
      />
      <area
        shape="poly"
        name="broccoli"
        data-tooltip="broccoli"
        coords="341,89, 342,91, 360,95, 353,100, 360,104, 364,109, 368,115, 369,112, 367,110, 376,111, 373,123, 367,128, 362,128, 359,131, 348,134, 345,137, 340,138, 341,148, 334,167, 323,172, 315,165, 315,162, 312,165, 311,172, 293,167, 292,141, 298,136, 307,134, 322,129, 328,128, 329,116, 319,109, 314,104, 317,93, 332,84"
        href="#"
      />
      <area
        shape="poly"
        name="broccoli2"
        data-tooltip="broccoli #2"
        coords="328,178, 338,197, 337,202, 330,215, 328,217, 325,228, 307,234, 305,239, 287,225, 287,216, 286,212, 282,216, 277,212, 277,185, 284,179, 310,175"
        href="#"
      />
      <area
        shape="poly"
        name="dip"
        data-tooltip="dip"
        coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102"
        href="#"
      />
    </map>
  </body>
</html>
